<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border ant-pro-card-contain-card"
    >
      <div
        class="ant-pro-card-body"
        style="padding: 0px;"
      >
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-icon"
                  >
                    <img
                      alt="icon"
                      src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
                      style="display: block; width: 42px; height: 42px;"
                    />
                  </div>
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Payment Amount
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              2,176
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-icon"
                  >
                    <img
                      alt="icon"
                      src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                      style="display: block; width: 42px; height: 42px;"
                    />
                  </div>
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Number of Visitors
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              475
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-icon"
                  >
                    <img
                      alt="icon"
                      src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
                      style="display: block; width: 42px; height: 42px;"
                    />
                  </div>
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Number of Successful Orders
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              87
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-icon"
                  >
                    <img
                      alt="icon"
                      src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*pUkAQpefcx8AAAAAAAAAAABkARQnAQ"
                      style="display: block; width: 42px; height: 42px;"
                    />
                  </div>
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Page Views
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              1,754
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard Icon Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            statistic.icon
          </strong>
          : 统计项图标，可以是图片或 React 节点
        </li>
        <li>
          <strong>
            statistic.title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            statistic.value
          </strong>
          : 统计数值
        </li>
      </ul>
      <h4>
        StatisticCard.Group Props：
      </h4>
      <ul>
        <li>
          <strong>
            direction
          </strong>
          : 排列方向，'row' 表示水平排列，'column' 表示垂直排列
        </li>
        <li>
          <strong>
            children
          </strong>
          : StatisticCard 子组件
        </li>
      </ul>
      <h4>
        RcResizeObserver Props：
      </h4>
      <ul>
        <li>
          <strong>
            onResize
          </strong>
          : 容器大小变化时的回调函数
        </li>
        <li>
          <strong>
            offset
          </strong>
          : 包含 width 和 height 的对象
        </li>
      </ul>
      <h4>
        响应式布局特点：
      </h4>
      <ul>
        <li>
          <strong>
            断点控制
          </strong>
          : 当容器宽度小于 596px 时切换为垂直布局
        </li>
        <li>
          <strong>
            自动适配
          </strong>
          : 根据屏幕尺寸自动调整布局方向
        </li>
        <li>
          <strong>
            实时监听
          </strong>
          : 使用 ResizeObserver 实时监听容器大小变化
        </li>
      </ul>
      <h4>
        Icon 使用方式：
      </h4>
      <ul>
        <li>
          <strong>
            图片图标
          </strong>
          : 使用 img 标签显示图标图片
        </li>
        <li>
          <strong>
            Ant Design 图标
          </strong>
          : 使用 @ant-design/icons 中的图标组件
        </li>
        <li>
          <strong>
            自定义图标
          </strong>
          : 使用 SVG 或其他自定义图标组件
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            数据仪表盘
          </strong>
          : 展示多个关键指标
        </li>
        <li>
          <strong>
            移动端适配
          </strong>
          : 在小屏幕设备上自动调整布局
        </li>
        <li>
          <strong>
            图标统计
          </strong>
          : 使用图标增强统计信息的可读性
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>